<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import FadeTransition from "@src/components/ui/transitions/FadeTransition.vue";
import useStore from "./store/store";

//配置store
const store = useStore();

// update localStorage with state changes
store.$subscribe((_mutation, state) => {
  localStorage.setItem("config", JSON.stringify(state));
});

// here we load the data from the server.
onMounted(async () => {
  store.status = "loading";
  // customerStore.status = "loading";

  // // fake server call
  // // const response = await get('https://yiketianqi.com/api?unescape=1&version=v1&appid=85841439&appsecret=EKCDLT4I');
  // //     console.log(response.data);

  // setTimeout(() => {
  //   store.delayLoading = false;
  //   customerStore.delayLoading = false;
  // });
  // const request = await fetchData();

  // store.$patch({
  //   status: "success",
  //   user: request.data.user,
  //   conversations: request.data.conversations,
  //   notifications: request.data.notifications,
  //   archivedConversations: request.data.archivedConversations,
  // });

  // customerStore.$patch({
  //   status: "success",
  //   user: request.data.user,
  //   conversations: request.data.conversations,
  //   notifications: request.data.notifications,
  //   archivedConversations: request.data.archivedConversations,
  // });
});

// the app height
const height = ref(`${window.innerHeight}px`);

// change the app height to the window hight.
const resizeWindow = () => {
  height.value = `${window.innerHeight}px`;
};

// and add the resize event when the component mounts.
onMounted(() => {
  window.addEventListener("resize", resizeWindow);  
});

// remove the event when un-mounting the component.
onUnmounted(() => {
  window.removeEventListener("resize", resizeWindow);
});
</script>

<template>
  <div :class="{ dark: store.settings.darkMode }">
    <div
      class="bg-white dark:bg-gray-800 transition-colors duration-500"
      :style="{ height: height }"
    >
      <router-view v-slot="{ Component }">
        <FadeTransition>
          <component :is="Component" />
        </FadeTransition>
      </router-view>
    </div>
  </div>
</template>
